﻿@{
    Layout = "~/Views/Shared/_Index.cshtml";
}

<div style="height:700px">
    <div id="container" style="height: 600px; width: 45%;float:left"></div>
    <div id="container2" style="height:600px; width: 55%;float:left "></div>
</div>

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    var mapOption;

    $(function () {
        loadBar('', '全国');
    });

    $.get('/StatisticalForm/Site/GetIndexMapJson',
        {},
        function (result) {
            mapOption = {
                title: {
                    text: '场地分布',
                    subtext: '省',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                visualMap: {
                    min: 0,
                    max: 1000,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'],
                    calculable: true
                },
                animation: true,
                animationDurationUpdate: 1000,
                animationEasingUpdate: 'cubicInOut',
                series: [
                    {
                        name: '中国',
                        type: 'map',
                        mapType: 'china',
                        roam: true,
                        label: {
                            normal: {
                                show: true,
                                formatter: function (params) {
                                    var icon = params.data.value[1] ? 'up' : 'down';
                                    var valueType = params.data.value[1] ? 'valueUp' : 'valueDown';
                                    return params.name
                                        + '：{' + valueType + '|' + params.value + '} {' + icon + '|}';
                                },
                                position: 'inside',
                                backgroundColor: '#fff',
                                padding: [4, 5],
                                borderRadius: 3,
                                borderWidth: 1,
                                borderColor: 'rgba(0,0,0,0.5)',
                                color: '#777',
                                rich: {
                                    valueUp: {
                                        color: '#019D2D',
                                        fontSize: 14
                                    },
                                    valueDown: {
                                        color: 'red',
                                        fontSize: 14
                                    },
                                    up: {
                                        height: 14,
                                        align: 'center'
                                    },
                                    down: {
                                        height: 14,
                                        align: 'center'
                                    }
                                }
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: result
                    }
                ]
            };

            myChart.setOption(mapOption, true);
        });

    myChart.on('click', function (params) {
        if (params.data) {
            loadBar(params.data.id, params.data.name, '25');
        }
    });

    //加载柱形图
    function loadBar(provinceId, provinceName) {
        var dom = document.getElementById("container2");
        var myChart = echarts.init(dom);
        var app = {};
        var option = null;
        var colors = ['#5793f3', '#d14a61', '#675bba'];

        $.get('/StatisticalForm/Site/GetIndexBarAndLineDataJson',
            {
                provinceId: provinceId
            },
            function (result) {
                var max = 0;
                for (var i = 0; i < result.counts.length; i++) {
                    if (i == 0) {
                        max = result.counts[i];
                    } else {
                        if (parseInt(max) < parseInt(result.counts[i])) {
                            max = result.counts[i];
                        }
                    }
                }
                max = parseInt(max) + 5;
                option = {
                    color: ['#3398DB'],
                    title: {
                        text: '场地类型分布',
                        subtext: provinceName,
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: result.names,
                            axisLabel: {
                                interval: 0,
                                rotate: -45,
                                margin: 10,
                                textStyle: {
                                    fontWeight: "bolder"

                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '数量',
                            min: 0,
                            max: max
                        }
                    ],
                    series: [
                        {
                            name: '总数量 ',
                            type: 'bar',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'inside'
                                }
                            },
                            data: result.counts
                        },
                        {
                            name: '2015 年',
                            type: 'line',
                            //yAxisIndex: 2,
                            data: result.countsOfYear2015,
                            itemStyle: {
                                normal: {
                                    color: '#58585a',
                                    lineStyle: {
                                        color: '#58585a'
                                    }
                                }
                            }
                        },
                        {
                            name: '2016 年',
                            type: 'line',
                            //yAxisIndex: 3,
                            data: result.countsOfYear2016,
                            itemStyle: {
                                normal: {
                                    color: '#81b6b2',
                                    lineStyle: {
                                        color: '#81b6b2'
                                    }
                                }
                            }
                        },
                        {
                            name: '2017 年',
                            type: 'line',
                            //yAxisIndex: 4,
                            data: result.countsOfYear2017,
                            itemStyle: {
                                normal: {
                                    color: '#675bba',
                                    lineStyle: {
                                        color: '#675bba'
                                    }
                                }
                            }
                        },
                        {
                            name: '2018 年',
                            type: 'line',
                            //yAxisIndex: 5,
                            data: result.countsOfYear2018,
                            itemStyle: {
                                normal: {
                                    color: '#d14a61',
                                    lineStyle: {
                                        color: '#d14a61'
                                    }
                                }
                            }
                        }
                    ]
                };

                myChart.setOption(option, true);
            });
    }
</script>
